<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
	
		<jsp:include page="ref.jsp"/>
		<meta charset="utf-8">
		<title>spdata-tsdb</title>
		<style>
			.form-control{
				height:28px;
				padding:3px 6px;
				
			}
			input[type="radio"], input[type="checkbox"]{
				width:20px;
				margin-top:6px;
				height:20px;
				box-shadow:0px 0px 0px;
			}
			
			label.control-label{
				font-weight:normal
			}
		</style>
		<script>
		
			Date.prototype.format = function(fmt) {
				  var o = {
				  		"M+" : this.getMonth()+1,   
				  		"d+" : this.getDate(), 
				  		"h+" : this.getHours(), 
				  		"m+" : this.getMinutes(),  
				  		"s+" : this.getSeconds(),  
				  		"q+" : Math.floor((this.getMonth()+3)/3), 
				  		"S"  : this.getMilliseconds() 
				  };
				  if(/(y+)/.test(fmt))
				  		fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
				  for(var k in o)
				  		if(new RegExp("("+ k +")").test(fmt))
				  fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
				  return fmt;
			}
		
		$(document).ready(function(){
			 // 基于准备好的dom，初始化echarts图表
		    var myChart = echarts.init(document.getElementById("main"));
		    var option = {
		       
    		  	tooltip : {         
    		  		trigger: 'axis',
        	        formatter: function (params) {
        	        	console.log(params);
        	            params = params[0];
        	            var date = new Date(params.name);
        	            return date.format("yyyy/MM/dd hh:mm:ss") + ' : ' + params.value[1];
        	        },
        	        axisPointer: {
        	            animation: false
        	        }
    		    },
    		    
		        legend: {
		            data:['测点1']
		        },
		        xAxis : [
		            {
		                type : 'time'
		            }
		        ],
		        yAxis : [
		            {
		                type : 'value',
		                axisLabel : {
		                    formatter: '{value}°C'
		                }
		            }
		        ],
		        series: []
		    };

		    // 为echarts对象加载数据
		    myChart.setOption(option);
		    
		    function showResult(data,start,end){
		    	option.xAxis = [{type:'time',min:new Date(start),max:new Date(end)}]
		    	option.legend.data = new Array();
		    	option.series = new Array();
		    	for(var i=0;i<data.length;i++){
		    		var s = {};
		    		var one = data[i];
		    		option.legend.data.push(one.metric);
		    		s.name = one.metric;
		    		s.type = 'line';
		    		s.showSymbol = false,
		    		s.hoverAnimation = false,
		    		s.data = new Array();
		    		var dps = one.dps;
		    		for(key in dps){
		    			var date = new Date(1*key);
		    			var value = dps[key];
		    			var d ={name:date.toString(),value: [date.format("yyyy/MM/dd hh:mm:ss"),value]};
		    			s.data.push(d);
		    		}
		    		option.series.push(s);
		    	}
		    	myChart.setOption(option,true);
		    }
		    
		    $("#downsample").on("click",function(){
		    	var downsample = this.checked;
		    	var disabled = !downsample;
		    	$("#frequence")[0].disabled = disabled;
		    	$("#timeunit")[0].disabled = disabled;
		    	$("#arithmetic")[0].disabled = disabled;
		    });
		    
		    
		    $("#submit").on("click",function(){
		    	var form = $("#query");
				var metric = form.find("#metric")[0].value;
				var start = form.find("#start")[0].value;
				var end = form.find("#end")[0].value;
				start = start.replace("T"," ");
				end = end.replace("T"," ");
				var device = form.find("#device")[0].value;
				var query = {};
				var subQuery = {};
				query.start = new Date(start).getTime();
				query.end = new Date(end).getTime();
				query.subQueries = new Array();
				query.subQueries.push(subQuery);
				subQuery.metric = metric;
				subQuery.tags = {"device":device};
				
				var downsample = $("#downsample")[0].checked;
				if(downsample){
					ds = {};
					subQuery.sample = ds;
					ds.frequence = form.find("#frequence")[0].value;
					ds.unit  = form.find("#timeunit").val();
					ds.arithmetic = form.find("#arithmetic")[0].value;
				}
				$.ajax({
	                type: "POST",
	                url: "query",
	                data: JSON.stringify(query),
	                contentType: 'application/json;charset=utf-8',
	                success:function(result){
	                	if(result.success){
	                		showResult(result.body,query.start,query.end);
	                	}else{
	                		alert(result.info);
	                	}
	                }
	            });
				
		    	
		    	return false;
		    });
				                    
		});
		
		</script>
	</head>
	<body class="flex-container-column container-fluid" >
		<form id="query" class="form-horizontal" style="padding-right:20px;">
		<div class="form-group">
			<label for="metric" class="control-label col-xs-2">设备:</label>
            <div class="col-xs-2">
            	<input type="text" class="form-control " id="device" name="device" />
            </div>
            <label for="metric" class="control-label col-xs-2">测点:</label>
            <div class="col-xs-2">
            	<input type="text" class="form-control " id="metric" name="metric" />
            </div>
           
          </div>
          <div class="form-group">
            
            <label for="name" class="control-label col-xs-2">开始时间:</label>
            <div class="col-xs-2">
            	<input type="datetime-local" class="form-control " id="start" name="start" />
            </div>
            <label for="name" class="control-label col-xs-2">结束时间:</label>
            <div class="col-xs-2">
            	<input type="datetime-local" class="form-control " id="end" name="end" />
            </div>
          </div>
          <div class="form-group">
          	<label for="name" class="control-label col-xs-2">降频采样:</label>
            <div class="col-xs-2">            	
            	<input type="checkbox" class="form-control " id="downsample" name="downsample" style=""/>
            </div>
            
            <label for="name" class="control-label col-xs-2">采样频率:</label>
            <div class="col-xs-2">
            	<div class="input-group">
			      <input type="text" class="form-control" id="frequence" name="frequence" disabled>
			      <div class="input-group-addon">
			      	<select class="form-control" id="timeunit" name="timeunit" disabled>
			      		<option value="MINUTES">分钟</option>
			      		<option value="HOURS">小时</option>
			      	</select>
			      </div>
			    </div>
            </div>
            <label for="name" class="control-label col-xs-2">采样算法:</label>
            <div class="col-xs-2">
		      	<select class="form-control" id="arithmetic" name="arithmetic" disabled>
		      		<option value="avg">平均值</option>
		      		<option value="max">最大值</option>
		      		<option value="min">最小值</option>
		      		<option value="first">最初值</option>
		      		<option value="last">最后值</option>
		      	</select>
            </div>
          </div>
          <div class="col-xs-offset-10 col-xs-2">
            <button id="submit" type="submit" class="btn btn-primary">查&nbsp;&nbsp;询</button>
          </div>
        </form>
		<div id="main" class="flex-item" style="margin-top:10px;">
			
	    </div>
	</body>
</html>